<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/share/_meta.jsp" %>
<%@ include file="/share/_footer.jsp" %>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/h-ui/common/jquery.editable-select.min.css" />
<div class="page-container">
    <form class="form form-horizontal" id="myform" method="post">
        <input type="hidden" value="${billaccount.id}" name="id" id="billId">
        <%--<input type="hidden" value="${billaccount.ids}" name="ids">--%>
        <input type="hidden" value="${billaccount.housingCode}" name="housingCode" id="housingCode">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>所属小区：</label>
            <div class="formControls col-xs-8 col-sm-9">
                ${billaccount.housingName}
                <%--<input type="text" class="layui-input input-text radius size-L" value="${billaccount.housingName}" name="housingName" disabled>--%>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>所属房间：</label>
            <div class="formControls col-xs-8 col-sm-9">
                ${billaccount.roominfoAddress}
                <%--<input type="text" class="layui-input input-text radius size-L" value="${billaccount.roominfoAddress}" name="roominfoAddress" disabled>--%>
            </div>
        </div>
        <div class="row cl">
            <table class="table table-border table-bordered table-bg table-hover table-sort table-striped">
                <thead>
                <tr class="text-c">
                    <th>项目名称</th>
                    <th>账期</th>
                    <th>金额</th>
                    <th>备注</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${costTypeList}" var="item">
                    <tr class="text-c">
                        <td>
                            ${item.costTypeName}
                            <%--<c:if test="${item.costType==1}">
                                <input type="text" class="layui-input input-text radius size-L" value="物业管理费" name="roominfoAddress" disabled>
                            </c:if>
                            <c:if test="${item.costType==2}">
                                <input type="text" class="layui-input input-text radius size-L" value="能源管理费" name="roominfoAddress" disabled>
                            </c:if>
                            <c:if test="${item.costType==3}">
                                <input type="text" class="layui-input input-text radius size-L" value="公共能耗费" name="roominfoAddress" disabled>
                            </c:if>
                            <c:if test="${item.costType==4}">
                                <input type="text" class="layui-input input-text radius size-L" value="预存水费" name="roominfoAddress" disabled>
                            </c:if>--%>
                        </td>
                        <td class="itemid">
                            ${item.acctPeriod}
                            <input type="hidden" value="${item.id}"/>
                        </td>
                        <td class="mybill"><input type="text" class="layui-input input-text radius size-L" value="${ item.billEntryAmount }" name="billAmount"></td>
                        <td class="remark"><input type="text" class="layui-input input-text radius size-L" name="remark"></td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>账单金额：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="layui-input input-text radius size-L" value="${billaccount.fkAmount}" placeholder="账单金额" name="billEntryAmount" id="billEntryAmount">
            </div>
        </div>
        <%--<div class="row cl">--%>
            <%--<label class="form-label col-xs-4 col-sm-2">收款时间：</label>--%>
            <%--<div class="formControls col-xs-8 col-sm-9">--%>
                <%--<input type="text" class="layui-input input-text radius size-L" value="${billaccount.paydate}" placeholder="yyyy-MM-dd" name="paydate" id="paydate">--%>
            <%--</div>--%>
        <%--</div>--%>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>付款方式：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <select class="form-control shift-info" name="paytype" required id="paytype">
                    <option value='' disabled selected style='display:none;'>请选择</option>
                    <option value="1">现金</option>
                    <option style="display: none" value="2">支付宝</option>
                    <option value="3">微信</option>
                    <option value="4">POS机</option>
                    <option value="5">银行转帐</option>
                    <option value="6">抵用券</option>
                    <option value="99">其他</option>
                </select>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                <button type="button" class="btn btn-secondary radius size-L" onclick="saveBill()">保&nbsp;存</button>
                <button type="button" class="btn btn-secondary radius size-L" onclick="layer_close();">取&nbsp;消</button>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/h-ui/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/h-ui/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/h-ui/common/laydate.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/h-ui/common/jquery.editable-select.min.js"></script>
<script type="text/javascript">
    $(function(){
        laydate.render({
            elem: '#releaseDay' //指定元素
            ,format: 'yyyyMMdd'
        });
        laydate.render({
            elem: '#deadline' //指定元素
            ,format: 'yyyyMMdd'
        });

        //给input绑定按下出发事件
       $(document).on('keyup', 'input', function () {
            var totalPrice = 0;
            $.each($("tbody tr"), function (index, domEle) {
                var billEntryAmount = $(domEle).children("td").eq(2).children("input").val();
                totalPrice = totalPrice + Number(billEntryAmount);
            });
            $("#billEntryAmount").val(totalPrice);
        });
        roomEdit();
    });

    function roomEdit() {
        $('#roominfoId').editableSelect({
            effects: 'default',
            onSelect: function (element) {
                $('.shift-info').attr('data-val', element.val());
            }
        }).prop('placeholder', '请选择房间');
    }

    //注册小区下拉框事件
    $("#housingId").change(function(){
        changChild($(this).val());
    });

    function changChild(tid){
        $.post("${pageContext.request.contextPath }/rest/roominfo/queryParentRoomById",{"housingId":tid},function(json){
            $("#roomdoc").html("");
            var $dom_one = "<select class=\"form-control shift-info\" name=\"roominfoId\" id=\"roominfoId\" required>";
            for(var i=0;i<json.length;i++){
                //添加一个房屋
                $dom_one += "<option value='"+json[i].id+"'>"+json[i].name+"</option>";
            }
            $dom_one += "</select>";
            $("#roomdoc").html($dom_one);
            roomEdit();
        },'json');
    }



    /*$("#myform").validate({
        rules:{
            billEntryAmount : {
                required: true,
                number : true
            }
        },
        submitHandler:function(form) {
            var temp = $('.shift-info').attr('data-val');
            $("#roominfoId").val(temp);
            $(form).ajaxSubmit({
                type: 'post',
                url: "${pageContext.request.contextPath }/rest/billAccount/receivAllBillAccount",
                beforeSubmit: function () {
                    layer.load();
                },
                success: function(data){
                    layer.closeAll('loading');
                    if (data.success) {
                        window.parent.location.reload();
                    }else {
                        layer.alert(data.message);
                    }
                },
                error: function(XmlHttpRequest, textStatus, errorThrown){
                    layer.closeAll('loading');
                    layer.alert('error!',{icon:1,time:1000});
                }
            });
        }
    });*/

    function saveBill(){
        var billList=[];
        var totalPrice = 0;
        $.each($("tbody tr"), function (index, domEle) {
            var billaccount={};
            var id = $(domEle).children("td").eq(1).children("input").val();
            var billEntryAmount = $(domEle).children("td").eq(2).children("input").val();
            var remark = $(domEle).children("td").eq(3).children("input").val();
            billaccount ={
                "id":id,
                "billEntryAmount":billEntryAmount,
                "remark":remark
            }
            totalPrice = totalPrice + Number(billEntryAmount);
            billList.push(billaccount);
        });
        var billaccount={
            billList:billList,
            id:$("#billId").val(),
            housingCode:$("#housingCode").val(),
            paytype:$("#paytype option:selected").val()
        }
        $.ajax({
            type: "POST",
            url: "${pageContext.request.contextPath }/rest/billAccount/receivAllBillAccount",
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            data:JSON.stringify(billaccount),
            success: function (data) {
                if (data.success) {
                    window.parent.location.reload();
                }else {
                    layer.alert(data.message);
                }
            },
            error: function (data, status, e) {
                alert("系统异常");
            }
        });
    }
</script>